<template>
	<view>
	<!-- 设置标题弹窗 -->
	<u-popup v-model="showPop1" mode="center" :mask-custom-style="maskCustomStyle" @close="close">
		<!-- <view class="popup"> -->
			<view class="flex-col flex-1 popup1 ml-7-5">
			  <text class="self-center title1">编辑</text>
			  <view class="flex-col items-center mt-16-5">
			   <view class="input-wrap">
			   	 <input type="text" :value="audioTitle" @input="handleInput" placeholder="请输入音频标题" class="input-class1" placeholder-class="input-placeholder1"/>
			   </view>
			    <view class="flex-row bottom-btn justify-between">
			      <view @click="close" class="flex-col justify-start items-center agree-btn">
			        <text class="font-noagree">取消</text>
			      </view>
			      <view @click="submit" class="flex-col justify-start items-center noagree-btn">
			        <text class="font-agree">确定</text>
			      </view>
			    </view>
			  </view>
			</view>
		<!-- </view> -->
	</u-popup>	
	</view>
</template>

<script>
	export default {
		props: {
			// 音频标题名称
			audioTitle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				audioUrl: '',//音频路径
				showPop1: false,//设置标题弹窗
				// audioName: '',
				audioTitle1: this.audioTitle,//设置音频标题名称
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
			}
		},
		onReady() {
			console.log('onReady')
		},
		mounted() {
			console.log('222')
		},
		methods: {
			open(){
				this.showPop1 = true;
			},
			close(){
				this.showPop1 = false;
			},
			// cancel(){
			// 	this.showPop1 = false;
			// },
			handleInput(e) {
				console.log(e.detail.value,'哈哈哈')
			        this.audioTitle1 = e.detail.value;
			      },
			submit(){
				// this.audioTitle1 = this.audioTitle;
				if(this.audioTitle1 == ''){
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					return
				}
				this.$emit('editSuccess',this.audioTitle1)
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
	/* 弹窗 */
	.popup {
		width: 100%;
		height: 668rpx;
		background-image: url('https://terminator.axu9.com/images/byaudio-pop-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	
	}
	
	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		height: 100rpx;
	}
	
	.opt-list-item {
		background-color: #282c33;
		border-radius: 24rpx;
		height: 143rpx;
		border: 1rpx solid #4d4f53;
		width: 690rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}
	
	.opt-list-item:first-child .lf-img {
		width: 32rpx;
		height: 45rpx;
	}
	
	.opt-list-item:last-child .lf-img {
		width: 36rpx;
		height: 31rpx;
	}
	
	.lf-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 20rpx;
	}
	
	.lf-img {
		width: 35rpx;
		height: 30rpx;
	}
	
	.rg-img {
		width: 11rpx;
		height: 20rpx;
	}
	
	.popup1 {
	  // margin-right: 40rpx;
	  padding: 59rpx 28rpx 30rpx;
	  border-radius: 32rpx;
	  background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 615rpx;
	  // height: 616rpx;
	}
	.title1 {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #ffffff;
	}
	.input-wrap {
		 padding: 41rpx 0;
		  border-radius: 16rpx;
		  width: 542rpx;
		  border: 1rpx solid #ffffff;
		  margin-top: 35rpx;
	}
	.input-class1 {
		 margin-left: 30rpx;
		  color: #ffffff;
		  font-size: 28rpx;
		  font-family: PingFang SC;
		  line-height: 26rpx;
	}
	.input-placeholder1 {
		/* margin-left: 30rpx; */
		 color: #ffffff;
		 font-size: 28rpx;
		 font-family: PingFang SC;
		 line-height: 26rpx;
	}
	
	.content1 {
	  margin-left: 6rpx;
	  color: #ffffff;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 54rpx;
	  text-align: center;
	  height: 270rpx;
	  overflow-y: scroll;
	}
	.bottom {
	  margin-top: 26rpx;
	}
	.text_agree {
	  color: #ffffff;
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
	.bottom-btn {
	  margin-top: 35rpx;
	  width: 546rpx;
	}
	.agree-btn {
	  padding: 34rpx 0;
	  /* flex: 1 1 257rpx; */
	  width: 257rpx;
	  border-radius: 16rpx;
	  height: 102rpx;
	  border: 2rpx solid #00e586;
	}
	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	
	.noagree-btn {
	  margin-right: 5rpx;
	  padding: 34rpx 0;
	  /* flex: 1 1 257rpx; */
	  width: 257rpx;
	  background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
	  border-radius: 16rpx;
	  height: 100rpx;
	}

</style>
